<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="app-container">
      <!-- 搜索 -->
      <el-card
        shadow="never"
        class="search-card-box"
        style="margin-bottom: 20px;"
      >
        <el-form
          ref="vehicleSearchFormData"
          :model="vehicleSearchFormData"
          label-width="90px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="车辆类型:"
                style="margin-bottom: 0px"
              >
                <el-select
                  v-model="vehicleSearchFormData.truckTypeId"
                  placeholder="请选择车辆类型"
                  clearable
                >
                  <el-option
                    v-for="item in carModelList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="车辆号码:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="vehicleSearchFormData.licensePlate"
                  placeholder="请输入车辆号码"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button
                type="warning"
                @click="searchFn"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('vehicleSearchFormData')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- tab切换 -->
      <TabChange
        :default-active-index="tabActiveIndex"
        :setting-list="settingList"
        @tabChange="tabChange"
      ></TabChange>
      <!-- 列表 -->
      <el-card
        v-loading="loading"
        class="box-card"
        shadow="never"
        element-loading-text="加载中"
        style="margin-top: 20px;"
      >
        <el-button
          type="warning"
          style="margin-bottom:20px"
          @click="handleAddVehicle()"
        >新增车辆</el-button>
        <template>
          <el-table
            :data="vehicleList"
            stripe
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="licensePlate"
              label="车牌号码"
              width="159"
            >
            </el-table-column>
            <el-table-column
              prop="truckTypeName"
              label="车辆类型"
              width="156"
            >
            </el-table-column>
            <el-table-column
              prop="driverNum"
              label="司机数量"
              width="156"
            >
            </el-table-column>
            <el-table-column
              prop="workStatus"
              label="车辆状态"
              width="156"
            >
              <template #default="scope">
                <span
                  class="tableColumn-status"
                  :class="{'stop-use': scope.row.workStatus === 0}"
                >
                  {{ scope.row.workStatus === 0 ? '停用' : '可用' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="deviceGpsId"
              label="GPS设备ID"
              width="235"
            >
            </el-table-column>
            <el-table-column
              prop="allowableLoad"
              label="实载重量（T）"
              width="235"
            >
            </el-table-column>
            <el-table-column
              prop="allowableVolume"
              label="实载体积（方）"
              width="235"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="220"
              align="center"
            >
              <!--  #default="scope" -->
              <template #default="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="$router.push(`vehicle-detail?id=${scope.row.id}`)"
                >查看详情</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link
                  v-if="scope.row.workStatus === 0"
                  type="primary"
                  :underline="false"
                  @click="vehicleActivation(scope.row.id)"
                >启用</el-link>
                <el-link
                  v-else
                  type="danger"
                  :underline="false"
                  @click="vehicleShutdown(scope.row.id)"
                >停用</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link
                  type="primary"
                  :underline="false"
                  @click="vehicleConfig(scope.row)"
                >配置司机</el-link>
              </template>
            </el-table-column>
            <!-- 搜索不到内容时显示 -->
            <el-card
              v-show="
                (!vehicleList || vehicleList.length <= 0) && !loading && searchkey
              "
              slot="empty"
              shadow="never"
            >
              <empty style="text-align: center"></empty>
            </el-card>
          </el-table>
        </template>
        <!-- 分页 -->
        <div
          v-show="vehicleList && vehicleList.length > 0"
          class="pagination"
        >
          <div class="pages">
            <el-pagination
              :current-page="Number(vehicleSearchFormData.page)"
              :total="Number(total)"
              :page-size="Number(vehicleSearchFormData.pageSize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>

      <!-- 新增车辆 -->
      <vehicleAdd
        ref="addVehicle"
        title-info="新增车辆"
        :form-base="formData"
        :car-model-list="carModelList"
        @newDataes="getListDia"
      ></vehicleAdd>

      <!-- 配置司机 -->
      <vehicleConfig
        ref="vehicleConfig"
        :form-base="configFormData"
      ></vehicleConfig>
    </div>
  </div>
</template>
<script>
import vehicleConfig from './components/vehicle-configure.vue'
import vehicleAdd from './components/vehicle-add.vue'
import TabChange from '@/components/TabChange'
import {
  getCarTypeList,
  truckList,
  getCarTypeStatics,
  truckStatusUse,
  truckStatusNoUse
} from '@/api/transit'
export default {
  name: 'Vehicle',
  components: {
    TabChange,
    vehicleAdd,
    vehicleConfig
  },
  data() {
    return {
      // 查询对象
      vehicleSearchFormData: {
        page: 1,
        pageSize: 10,
        licensePlate: '', // 车辆号码
        truckTypeId: '', // 车辆类型id
        workStatus: ''
      },
      // 筛选项数据
      carModelList: [],
      tabActiveIndex: 0,
      loading: true,
      settingList: [
        {
          value: 0,
          label: '全部',
          num: 0
        },
        {
          value: 2,
          label: '可用',
          num: 0
        },
        {
          value: 1,
          label: '停用',
          num: 0
        }
      ],
      // 列表数据集合
      vehicleList: [],
      // 总数量
      total: 0,
      searchkey: false,
      formData: {
        licensePlate: '',
        deviceGpsId: '',
        truckTypeId: null
      },
      // 弹窗标题
      titleInfo: {
        text: ''
      },
      // 配置司机表单数据
      configFormData: {}
    }
  },
  created() {
    this.getCarModelList()
    this.getList()
    this.getVehicleStatic()
  },
  methods: {
    // 获取车辆类型搜索项下拉数据
    async getCarModelList() {
      this.loading = true
      const res = await getCarTypeList()
      this.carModelList = res.data
    },
    // tab切换，重新渲染列表数据
    tabChange(activeIndex) {
      this.tabActiveIndex = activeIndex
      this.vehicleSearchFormData.page = 1
      this.getList()
    },
    // 获取列表数据
    async getList() {
      this.loading = true
      const params = { ...this.vehicleSearchFormData }
      if (this.tabActiveIndex === 0) {
        delete params.workStatus
      } else if (this.tabActiveIndex > 0) {
        params.workStatus = this.tabActiveIndex - 1
      }

      const res = await truckList(params)
      console.log(res)
      this.vehicleList = res.data.items
      this.total = res.data.counts
      this.loading = false
    },
    // 调用统计车辆状态数量接口，对settingList重新的num重新赋值
    async getVehicleStatic() {
      const { data: res } = await getCarTypeStatics()
      this.settingList[1].num = res[1] || 0
      this.settingList[2].num = res[0] || 0
      this.settingList[0].num =
        Number(this.settingList[1].num) +
        Number(this.settingList[2].num)
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.vehicleSearchFormData.page === 1
      this.vehicleSearchFormData.pageSize = val
      this.getList()
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.vehicleSearchFormData.page = val
      this.getList()
    },
    clearField() {
      // 如果其他搜索项没有值则不传给后端
      if (this.vehicleSearchFormData.licensePlate === '') {
        this.$delete(this.vehicleSearchFormData, 'licensePlate')
      }
      if (this.vehicleSearchFormData.truckTypeId === '') {
        this.$delete(this.vehicleSearchFormData, 'truckTypeId')
      }
      if (this.vehicleSearchFormData.workStatus === '') {
        this.$delete(this.vehicleSearchFormData, 'workStatus')
      }
    },
    setField() {
      // 对搜索项属性设置响应式，便于重置方法生效
      this.$set(this.vehicleSearchFormData, 'licensePlate')
      this.$set(this.vehicleSearchFormData, 'truckTypeId')
      this.$set(this.vehicleSearchFormData, 'workStatus')
    },
    // 搜索
    searchFn() {
      this.clearField()
      // console.log(this.vehicleSearchFormData)
      this.vehicleSearchFormData.page = 1
      this.getList()
      this.searchkey = true
    },
    // 重置搜索项
    resetForm(vehicleSearchFormData) {
      this.setField()
      this.searchkey = false
      this.$refs[vehicleSearchFormData].resetFields()
      this.getList()
    },
    handleAddVehicle() {
      this.$refs.addVehicle.dialogFormV()
    },
    // 子组件新增或编辑成功，通知父组件更新列表
    getListDia() {
      this.getList()
    },
    // 车辆启用
    vehicleActivation(id) {
      const h = this.$createElement
      this.$confirm('车辆启用', {
        title: '车辆启用',
        message: h('div', [
          h('p', { style: 'margin-bottom: 9px; color: rgb(51, 41, 41);' }, '确定要启用吗？车辆启用需满足以下条件:'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;' }, '1'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '车辆信息已完善'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-left: 90px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;' }, '2'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '绑定司机>=2,且有排班')
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await truckStatusUse(id)
        console.log(res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '车辆启用成功!'
          })
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消车辆启用'
        })
      })
    },
    // 车辆停用
    vehicleShutdown(id) {
      const h = this.$createElement
      this.$confirm('车辆停用', {
        title: '车辆停用',
        message: h('div', [
          h('p', { style: 'margin-bottom: 9px; color: rgb(51, 41, 41);' }, '确定要停用吗？车辆停用需满足以下条件：'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;' }, '1'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '车辆当前无运输任务'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-left: 90px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;' }, '2'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '车辆无关联运输线路'),
          h('p', { style: 'color: rgb(255, 179, 2); margin-top: 10px; margin-bottom: -10px;' }, '注：停用后司机将自动解除绑定')
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await truckStatusNoUse(id)
        console.log(res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '车辆停用成功!'
          })
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消车辆停用'
        })
      })
    },
    // 车辆配置
    vehicleConfig(row) {
      this.configFormData = { ...row }
      const h = this.$createElement
      this.$confirm('司机配置', {
        title: '司机配置',
        message: h('div', [
          h('p', { style: 'margin-bottom: 9px; color: rgb(51, 41, 41);' }, '配置司机需满足以下条件：'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;' }, '1'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '车辆信息已完善'),
          h('span', { style: 'width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); margin-left: 90px; border-radius: 50%; display: inline-block; text-align: center; line-height: 14px; margin-right: 6px;' }, '2'),
          h('span', { style: 'color: rgb(51, 41, 41);' }, '车辆无未完成运输任务')
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(row)
        this.$refs.vehicleConfig.dialogFormV()
        // const res = await truckStatusNoUse(id)
        // console.log(res)
        // if (res.code === 200) {
        //   this.$message({
        //     type: 'success',
        //     message: '车辆停用成功!'
        //   })
        //   this.getList()
        // } else {
        //   this.$message({
        //     type: 'error',
        //     message: res.msg
        //   })
        // }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消车辆停用'
        })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 20px;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
}
.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
    .tableColumn-status::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: #1dc779;
      border-radius: 50%;
      margin-right: 6px;
    }
    .stop-use::before {
      background-color: #e15536;
    }
    .el-message-box {
      width: 481px;
    }
    .el-message-box__container {
      margin-bottom: 15px;
    }
</style>
